import React,{useState,memo} from 'react';
import { connect } from 'react-redux';
import { addCommentAction } from '../../store/actions';
import Header from '../../components/Header';
import style from './index.module.scss';
import {useHistory} from 'react-router';
const WrapHeader = memo(Header);
interface Iprops {
    addLeave: (content:string,typeId:string,valueId:string) => void,
    location:{[key:string]:any}
}

const Leave:React.FC<Iprops> = props=>{
    const history = useHistory();
    const [value,setValue] = useState('');
    const {state:{id}} = props.location;
    const addLeave = ()=>{
        props.addLeave(value,'1',id);
        history.replace(`/topicDetail/${id}`)
    }
    const resetLeave = ()=>{
        setValue('')
    }
    return <div  className={style.leave} >
        <WrapHeader title="填写留言"/>
        <div className={style.content}>
            <textarea 
                value={value} 
                onChange={(e)=>setValue(e.target.value)}
                maxLength={80}
            ></textarea>
            <div className={style.number}>
                <span>{value.length}/80</span>
            </div>
            <div className={style.footer}>
                {
                    value.length
                    ?
                    <button className={style.left} onClick={resetLeave}>清空</button>
                    :
                    null
                }
                <button onClick={addLeave}>留言</button>
            </div>
        </div>
    </div>
}

const mapDispatchToProps = (dispatch: Function) => {
    return {
        addLeave: (content:string,typeId:string,valueId:string) => {
            dispatch(addCommentAction(content,typeId,valueId));
        }
    }
}
export default connect(null, mapDispatchToProps)(Leave) 
